<template>
	<view class="friend_contont">
		<view class="head">
			<view class="head_li">
				<view class="_img">
					<image :src="myInfo.avatar" @click="NavigatorPersonal(myInfo.id)"></image>
				</view>
				<text class="text">联系人</text>
				<image src="/static/message-icons/add_friend.png" class="icon" @click="NavigatorAdd"></image>
			</view>
		</view>
		<view class="body">
			<view class="middle">
				<view class="search" @click="NavigatorSearch">
					<up-icon name="search" size="28" color="#b6b6b6"></up-icon>
					<text>薛之谦</text>
				</view>
			</view>
			<view class="item" @click="NavigatorFriendAdd">
				<text>新朋友</text>
				<view class="badge" v-show="badge != 0"><text>{{badge}}</text></view>
				<uni-icons type="forward" size="30" color="#bababa" class="icon"></uni-icons>
			</view>
			<view class="item">
				<text>群通知</text>
				<uni-icons type="forward" size="30" color="#bababa" class="icon"></uni-icons>
			</view>
			<view style="background-color: #e6e6e6;height: 40rpx;"></view>
		</view>
		<view class="list">
			<view class="groess">
				<view class="l_head">
					<view class="h_item" style="color: #0ccbff;">好友</view>
				</view>
				<view class="xian"></view>
			</view>
			<scroll-view scroll-y="true" :scroll-top="scrollTop" class="l_body" @scroll="scroll"
				scroll-with-animation="true">
				<view class="group" v-for="(group,i) in list" :key="i">
					<view class="initial">{{group.initial}}</view>
					<view class="g_item" v-for="(item,idex) in group.data" :key="idex"
						@click="NavigatorPersonal(item.id)">
						<image :src="item.avatar"></image>
						<view class="detail">
							<text class="one">{{item.nickName}}</text>
							<text class="two">[{{item.isActive==='1'?'在线':'不在线'}}] {{item.sign}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="alphabet">
				<text v-for="(group,i) in list" :key="i" @click="check(i)">{{group.initial}}</text>
			</view>
		</view>
		<my-tabBar :routePath="$page.path"></my-tabBar>
	</view>
</template>

<script>
	import {
		getSpell
	} from 'jian-pinyin'
	import {
		mapState
	} from 'vuex'
	import {
		getFriends,
		getRequestFriend
	} from '../../common/api';
	export default {
		computed: {
			...mapState('info', ['myInfo'])
		},
		data() {
			return {
				arr: [], //获取的列表
				list: [], //排序后的列表
				systemInfo: uni.getSystemInfoSync(),
				scrollTop: 0,
				scrollHeight: 0,
				badge: 0
			};
		},
		onLoad() {
			this.Init();
		},
		onShow() {
			this.Init();
		},
		methods: {
			Init() {
				getFriends({
					uid: this.myInfo.id
				}).then((res) => {
					if (res.code == 200) {
						this.arr = res.data;
						this.scrollTop = 1;
						this.list = this.formatList();
					}
				});
				getRequestFriend({
					uid: this.myInfo.id
				}).then((res) => {
					if (res.code == 200) {
						let badge = 0;
						for (let i = 0; i < res.data.list.length; i++) {
							if (res.data.list[i].type === 3) {
								badge++;
							}
						}
						this.badge = badge;
					}
				})
			},
			NavigatorSearch() {
				uni.navigateTo({
					url: '/subpkg/head_search/head_search'
				})
			},
			NavigatorAdd() {
				uni.navigateTo({
					url: '/subpkg/addFriend_search/addFriend_search?uid=' + this.myInfo.id
				})
			},
			NavigatorFriendAdd() {
				uni.navigateTo({
					url: '/subpkg/friend_request/friend_request?uid=' + this.myInfo.id
				})
			},
			NavigatorPersonal(id) {
				uni.navigateTo({
					url: '/subpkg/personal_details/personal_details?fid=' + id
				})
			},
			check(i) {
				let item = (this.systemInfo.windowWidth / 750 * 130).toFixed(2);
				let head = (this.systemInfo.windowWidth / 750 * 60).toFixed(2);
				let itemNum = 0;
				let headNum = i;
				for (let a = 0; a < i; a++) {
					itemNum += this.list[a].data.length;
				}
				let scrollTop = (item * itemNum) + (head * headNum);
				this.scrollTop = scrollTop;
			},
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			formatList() {
				var pinyinArray = new Array()
				for (let i = 0; i < this.arr.length; i++) {
					var o = new Object()
					var ken = getSpell(this.arr[i].nickName, (charactor, spell) => spell[1]);
					o = this.arr[i]
					o.pinyin = ken.split(',').join('')
					pinyinArray.push(o)
				}
				let map = {
					initial: '', //字母
					data: [], //数据
				}
				pinyinArray.forEach((item, index) => {
					if (!map[item.pinyin[0].toUpperCase()]) {
						map[item.pinyin[0].toUpperCase()] = {
							initial: item.pinyin[0].toUpperCase(),
							data: []
						}
					}
					map[item.pinyin[0].toUpperCase()].data.push(item)
				})
				var turn = new Array()
				var letters = "*ABCDEFGHIJKLNMOPQRSTUVWXYZ".split('');
				for (var i = 1; i < letters.length; i++) {
					if (map[letters[i]]) {
						var obj = new Object()
						obj.initial = letters[i]
						obj.data = map[letters[i]].data
						turn.push(obj)
					}
				}
				return turn;
			},
			formatList1() {
				if (this.arr.length == 0) return;
				if (!String.prototype.localeCompare) return null;
				const letters = "*ABCDEFGHJKLMNOPQRSTWXYZ".split("");
				const zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split("");
				let segs = []; // 存放数据
				let res = {};
				let curr;
				const re = /[^\u4e00-\u9fa5]/; //中文正则
				const pattern = new RegExp(
					"[`\\-~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？12345678990]"); //特殊符号

				letters.filter((items, i) => {
					curr = {
						initial: '', //字母
						data: [], //数据
					};
					this.arr.map((v, index) => {
						// 特殊字符
						if (pattern.test(v.nickName[0])) {
							if ((!zh[i - 1] || zh[i - 1].localeCompare(v.nickName) <= 0) && v.nickName
								.localeCompare(zh[i]) == -1) {
								curr.data.push(v);
							}
						}
						// 判断首个字是否是中文 
						if (re.test(v.nickName[0])) {
							// 英文 
							if (v.nickName[0].toUpperCase() == items) {
								curr.data.push(v);
							}
						} else {
							// 中文
							if ((!zh[i - 1] || zh[i - 1].localeCompare(v.nickName) <= 0) && v.nickName
								.localeCompare(zh[i]) == -1) {
								curr.data.push(v);
							}
						}

					})
					if (curr.data.length) {
						curr.initial = letters[i]
						segs.push(curr);
						curr.data.sort((a, b) => {
							return a.nickName.localeCompare(b.nickName);
						});
					}
				})
				res.segs = Array.from(new Set(segs)) //去重
				return res.segs;
			}
		}
	}
</script>

<style lang="scss">
	.friend_contont {
		.head {
			background: linear-gradient(90deg, rgba(122, 220, 241, 1) 0%, rgba(43, 163, 242, 1) 48%);
			width: 750rpx;
			height: 150rpx;
			position: relative;

			.head_li {
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 130rpx;
				display: flex;
				justify-content: space-between;
				line-height: 140rpx;
				padding: 0 0rpx;

				._img {
					height: 90rpx;
					padding: 10rpx;
					display: flex;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50rpx;
						margin-top: 20rpx;
						margin-left: 10rpx;

						&:active {
							transform: scale(0.9);
							transition: transform 0.1s;
						}
					}
				}

				.text {
					color: #f1f1f1;
					font-size: 35rpx;
				}

				.icon {
					padding: 50rpx 30rpx;

					width: 50rpx;
					height: 50rpx;

					&:active {
						transform: scale(0.8);
						transition: transform 0.1s;
					}
				}
			}
		}

		.body {
			width: 750rpx;
			height: 400rpx;
			background-color: #fff;

			.middle {
				height: 110rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.search {
					width: 700rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 20rpx;
					background-color: #e6e6e6;

					text {
						color: #b6b6b6;
					}
				}
			}

			.item {
				height: 120rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				position: relative;

				text {
					padding: 0 30rpx;
				}

				.badge {
					position: absolute;
					right: 90rpx;
					bottom: 35rpx;
					background-color: rgba(250, 7, 64, 0.8);
					border-radius: 100rpx;
					display: flex;
					align-items: center;

					text {
						color: #fff;
						font-size: 26rpx;
						font-weight: bold;
						padding: 10rpx 20rpx;
						// margin: 20rpx 10rpx;
					}
				}
			}

		}

		.list {
			width: 750rpx;
			height: 58vh;

			.groess {
				height: 100rpx;

				.l_head {
					height: 75rpx;
					display: flex;
					justify-content: space-between;

					.h_item {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 32rpx;
						height: 75rpx;
						width: 100rpx;
						padding: 10rpx;
					}
				}

				.xian {
					width: 70rpx;
					height: 0rpx;
					border: 3rpx solid #0ccbff;
					margin: 5rpx 20rpx;
				}
			}

			.l_body {
				height: 53vh;

				.group {
					.initial {
						height: 40rpx;
						padding: 10rpx 30rpx;
					}

					.g_item {
						display: flex;
						padding: 15rpx;

						&:active {
							background-color: #dbdbdb;
						}

						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50rpx;
						}

						.detail {
							display: flex;
							flex-direction: column;
							line-height: 50rpx;
							padding: 0 15rpx;

							.one {
								font-size: 35rpx;
								font-weight: bold;
							}

							.two {
								font-size: 30rpx;
								color: #555555;
							}
						}
					}
				}
			}
		}

		.alphabet {
			position: fixed;
			width: 10rpx;
			right: 0;
			top: 650rpx;
			// bottom: 150rpx;
			width: 50rpx;
			height: 800rpx;
			display: flex;
			flex-direction: column;
			font-size: 25rpx;
			align-items: center;
			line-height: 40rpx;

			:active {
				transform: scale(2);
				color: #0ccbff;
			}
		}
	}
</style>